import React from 'react'
import './index.css'
import music from './music.svg'// svg 图片需要采用导入的方式
import { Toast } from 'antd-mobile';
import { connect } from 'react-redux'
import { loadHots, search,addHistoryWords,delHistory,delAllHistory,loadSuggest } from '../../../store/search.redux'
import {checkSong} from '../../../store/player.redux'


//映射  仓库数据映射到 组件中的props 上  
@connect(
  state => ({
    hots: state.search.hots,
    songs: state.search.songs,
    historyWords:state.search.historyWords,
    isCheck:state.player.isCheck,
    suggest:state.search.suggest
  }),
  {
    loadHots, 
    search,
    addHistoryWords,
    delHistory,
    delAllHistory,
    checkSong,
    loadSuggest
  }
)
class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hideSearchBtn: true,// 控制搜索和取消按钮  刚开始隐藏搜索按钮 显示取消按钮
      hideHistory: true,// 控制历史记录的隐藏  刚开始为隐藏
      hideResult: true,//控制搜索结果  刚开始为隐藏
      hideHotSearch: false,//控制热门搜索 刚开始并不隐藏
      hideSuggest:true,//控制搜索建议
      id:0//准备要播放的歌曲id

    };
  }

  componentDidMount() {
    this.props.loadHots()//加载热门搜索
  }

  componentWillReceiveProps(nextProps){
    
    console.log(this.props.isCheck);//之前的歌曲版权信息 
    console.log(nextProps.isCheck)
    
    if(nextProps.isCheck.message!==''){
      //如果不为空  点击了某一首歌  
      if( nextProps.isCheck.success && this.state.id > 0){
        //去播放
        this.props.history.push({pathname:'/player/'+ this.state.id,state:{from:this.props.location.pathname}})
      }else if(!nextProps.isCheck.success){
        //提示没有版权
        Toast.info(nextProps.isCheck.message,2)
      }else{
        //还没点击歌曲
      }
    }

  }
  //根据歌曲id检测是否有权限播放该歌曲
  check=(id)=>{
    console.log(1)
    this.setState({
      id
    })
    this.props.checkSong(id)
  
  }
  
  //方法：
  showSearchBar = () => {
    //当文本框获得焦点的时候 让文本框容器宽度缩小 右侧按钮显示出来
    this.refs.ipt.style.width = "88%"
    //隐藏热门搜索 显示历史记录
    this.setState({
      hideHotSearch:true,
      // 如果搜索的结果是显示的 让历史记录隐藏起来  否则让历史记录显示
      hideHistory:this.state.hideResult===false ||this.state.hideSuggest===false?true:false
    })
  }

  toggleSearchBar = (event) => {
    let hideSearch = true
    let conent = event.target.value.trim();//获取文本框的值
    let len = event.target.value.trim().length;//获取文本框内容的长度 根据长度来判断文本框是否有值 有值显示搜索按钮 没值显示取消按钮   只有文本框有值的时候才会显示搜索建议
    if(len>0){
      hideSearch=false
      this.props.loadSuggest(conent)
    }
    this.setState({
      hideSearchBtn:hideSearch,
      hideSuggest:hideSearch,//有字的时候  让搜索建议显示出来
      hideHistory:true
    })
    
  }
  //点击取消按钮
  cancle = () => {
    //点击取消按钮  使文本框容器恢复成默认宽度
    this.refs.ipt.style.width = "96%";
    this.setState({
      // 清空搜索的文字之后 点取消 让搜索列表隐藏   让人么列表显示
      hideResult:true,
      hideHotSearch:false,
      hideHistory:true
    })
  }

  //点击搜索按钮
  find = () => {
    //点击搜索按钮 获取文本框的值  调用数据接口
    let text = this.refs.searchInput.value.trim();//获取文本框的值
    //加载搜索列表
    this.props.search(text);
    this.setState({
      // 输入歌手或歌名的时候 点击搜索 让搜索列表显示 热门搜索隐藏
      hideResult:false,
      hideHotSearch:true,
      hideHistory:true
    })

    this.props.addHistoryWords(text)//将搜搜的内容添加到历史记录中
  }

  //以热门内容作为搜索条件   点击热门搜索列表的标签  将点击的内容呈现在文本矿中 并出现搜索的内容列表
  searchHot=(text)=>{
    this.refs.searchInput.value=text;//将搜索的内容放到文本框里
    //加载搜索列表
    this.props.search(text);
    this.setState({
      // 输入歌手或歌名的时候 点击搜索 让搜索列表显示 热门搜索隐藏  历史记录隐藏
      hideResult:false,
      hideHotSearch:true,
      hideHistory:true,
      hideSuggest:true
    })

    this.props.addHistoryWords(text)//将搜索的内容添加到历史记录中
  }

  
  render() {
    return (
      <div className="searchBox">
      {/* 搜索框 */}
        <div className="iptBox">
          <div className="ipt" ref="ipt">
            <span className="iconfont icon-sousuo" id="search"></span>
            <input type="search" placeholder="搜索歌曲、歌单、专辑" id="searchInput"
              ref="searchInput"
              onFocus={this.showSearchBar}
              onChange={this.toggleSearchBar}
              autoComplete='off'
            />
          </div>
          <p className="callOff" hidden={!this.state.hideSearchBtn} onClick={this.cancle}>取消</p>
          <p className="callOff search_btn" hidden={this.state.hideSearchBtn} onClick={this.find}>搜索</p>
        </div>
        {/* 历史记录模块 */}
        <div className="searchBar" >
          <div className="search_hisTory" hidden={this.state.hideHistory}>
            <div className="search_hisTory_box">
              
              {
                this.props.historyWords.map((history,index)=>{
                  return (
                    <p key={index}  onClick={()=>this.searchHot(history)}>
                      {history}
                      {/* 将删除历史记录的方法定义在仓库中 */}
                      <span className="delIcon" onClick={(event)=>{
                        event.stopPropagation();//阻止事件冒泡 点击时只让他删除 不要冒泡到父元素身上进行内容搜索
                        this.props.delHistory(history)
                      }}>X</span>
                    </p>
                  )  
                })
              }
              {/* 判断历史记录那个数组 中是否有记录 有记录 让此标签显示 无记录 让此标签隐藏 */}
              <h1 hidden={this.props.historyWords.length===0?true:false} onClick={this.props.delAllHistory}>清空历史搜索记录</h1>
            </div>
          </div>
          {/* 热门搜索 */}
          <div className="hotsearch" hidden={this.state.hideHotSearch}>
            <h2 className="hotsearch_title">热门搜索</h2>
            <div className="hot_sea">
              {
                this.props.hots.map((h, i) => [
                  <span className={i === 0 ? "on" : ""} key={i} onClick={()=>this.searchHot(h.first)}>
                    {h.first}
                  </span>
                ])
              }

            </div>
          </div>
        </div>
      {/* 搜索建议 */}
        <div className='search_suggest' hidden={this.state.hideSuggest}>
          <ul>
            {
              this.props.suggest.map((sug,index)=>(
              <li key={index} onClick={()=>this.searchHot(sug.keyword)}>{sug.keyword}</li>
              ))
            }
            
            
          </ul>
        </div>

        {/* 搜索结果 */}
        <div className="search_songList" hidden={this.state.hideResult}>
          <ul >

            {
              this.props.songs.map((song, index) => (
                
                <li key={song.id} onClick={()=>this.check(song.id)}>
                  <img src={music} alt="" />
                  <div className="search_song_name">
                    <p className="search_song_name1">{song.name}</p>
                    <p className="search_song_name2">
                      {
                        song.artists.map((singer, index) => (
                          <span key={singer.id}>{singer.name}</span>
                        ))
                      }

                    </p>
                  </div>
                    <span>{index+1}</span>
                </li>
              
              ))
            }

            <li className="isEnd">
              已经到底啦~
            </li>
          </ul>
        </div>
      </div>
    )
  }
}
export default Search